<template>
    <div class="Login">
        <div class="login-logo">
            <div class="logo">
                <img src="@/assets/logo.webp" alt="">
            </div>
            <span>健康饮食，从这里开始</span>
        </div>
        <div class="login-content">
            <div class="loginRegister">
                <span @click="loginRegister(true)" class="login" :class="{ 'active': isLogin }">登陆</span>
                <span @click="loginRegister(false)" class="register" :class="{ 'active': !isLogin }">注册</span>
            </div>
            <div class="onLogin" v-if="isLogin">
                <van-cell-group inset>
                    <van-field class="input" v-model="username" placeholder="请输入账号" right-icon="user" />
                    <van-field class="input" v-model="password" placeholder="请输入密码" type="password" right-icon="eye" />
                </van-cell-group>
                <div class="btn">
                    <van-button @click="login" type="primary" size="large">登陆</van-button>
                </div>
            </div>
            <div class="onLogin" v-else>
                <van-cell-group inset>
                    <van-field class="input" v-model="username" placeholder="请输入账号" right-icon="user" />
                    <van-field class="input code" v-model="code" placeholder="请输入验证码">
                        <template #button>
                            <!-- <van-button size="small" type="primary">发送验证码</van-button> -->
                            <verifyImg ref="verifyImgRef"></verifyImg>
                        </template>
                    </van-field>
                    <van-field class="input" v-model="password" placeholder="请输入密码" type="password" right-icon="eye" />
                </van-cell-group>
                <div class="btn">
                    <van-button @click="register" type="primary" size="large">注册</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import md5 from 'md5'
import { useRouter } from 'vue-router'
import { showSuccessToast, showFailToast } from 'vant';
import { userLogin, userRegister } from '@/api/index.js'
import verifyImg from '@/components/verifyCode.vue';


const router = useRouter()
const username = ref('')
const password = ref('')
const isLogin = ref(true)
const verifyImgRef = ref('')
const code = ref('')


const loginRegister = (show) => {
    isLogin.value = show
}

// 登陆
const login = async () => {
    if (username.value === '' || password.value === '') {
        showFailToast('账号或密码不能为空')
        return
    }
    // 发送登陆请求
    const res = await userLogin({ username: username.value, password: md5(password.value) })
    // console.log(res);
    localStorage.setItem('token', res.token)
    localStorage.setItem('userInfo', JSON.stringify(res.data))
    showSuccessToast('登陆成功')
    router.push('/userDetail')
}

// 注册
const register = async () => {
    if (username.value === '' || password.value === '') {
        showFailToast('账号或密码不能为空')
        return
    }
    if (code.value === verifyImgRef.value.verifyCode) {
        const res = await userRegister({ username: username.value, password: md5(password.value) })
        // console.log(res);
        showSuccessToast(res.msg)
        isLogin.value = res.flag
    } else {
        showFailToast('验证码不正确')
        return
    }
}

</script>

<style lang="less" scoped>
.Login {
    padding: 0 0.64rem;

    .login-logo {
        margin-top: 1.71rem;
        display: flex;
        flex-direction: column;
        align-items: center;

        .logo {
            width: 1.71rem;

            img {
                width: 100%;
            }
        }

        span {
            font-weight: 400;
            font-size: 0.37rem;
            color: #4B5563;
            margin-top: 0.27rem;
        }
    }

    .login-content {
        margin-top: 1.28rem;

        .loginRegister {
            display: flex;
            justify-content: center;

            span {
                padding: 0.25rem;
                font-weight: 400;
                font-size: 0.48rem;
                color: #9CA3AF;
                margin: 0 0.64rem;

                &.active {
                    font-weight: 500;
                    font-size: 0.48rem;
                    color: #3176FF;
                    border-bottom: 1px solid #3176FF;
                }
            }
        }

        .onLogin {
            margin-top: 0.85rem;

            .input {
                margin-bottom: 0.64rem;
                border: 1px solid #E5E7EB;


                &.code {
                    padding-top: 1px;
                    padding-bottom: 1px;
                    padding-right: 0;
                }

                :deep(.van-field__button) {
                    height: 1.07rem;
                }
            }


        }
    }


}
</style>